<template>
  <div>
    <el-link type="success" @click="showEnclosure">附件 <i class="el-icon-paperclip" /></el-link>

    <el-dialog title="附件" :visible.sync="visable" width="50%" append-to-body>
      <el-empty description="内容为空" v-if="resList.length === 0" />
      <el-timeline v-else>
        <el-timeline-item
          v-for="(item) in resList"
          :key="item.resId"
          size="large"
          placement="top"
          :timestamp="getSuffix(item.resUrl)"
          >
          <el-card shadow="never" class="flex items-center">
            <div v-if="item.resType != 1">
              <i :class="icons[item.resType]" class="iconStyle"></i>
              <el-link  type="primary" @click="openFile(item)">{{ item.resName }}</el-link>
            </div>
            <el-image v-else style="width: 200px;height:150px;" fit="contain" :src="item.resUrl" :preview-src-list="[item.resUrl]" />
          </el-card>

        </el-timeline-item>
      </el-timeline>
    </el-dialog>

  </div>
</template>

<script>
import { getResource } from '@/api/common'

export default {
  props: {
    currentQu: {
      type: Object,
      default: () => ({})
    },
    isAnswer: Boolean
  },
  data() {
    return {
      resList: [],
      visable: false,
      icons: ['el-icon-document-remove', 'el-icon-picture-outline', 'el-icon-microphone', 'el-icon-data-line', 'el-icon-collection','el-icon-folder', ]
    }
  },
  computed: {
    enclosures() { // 附件id字符串
      let temp = null
      const has = Object.prototype.hasOwnProperty
      if(!this.isAnswer) {
        temp =  has.call(this.currentQu, 'objStemEnclosure') ? this.currentQu.objStemEnclosure : this.currentQu.subStemEnclosure
      } else {
        temp = has.call(this.currentQu, 'objAnswerEnclosure') ? this.currentQu.objAnswerEnclosure : this.currentQu.subAnswerEnclosure
      }
      return temp
    }
  },
  methods: {
    // 查看附件
    async showEnclosure() {
      console.log(this.enclosures)
      if(!this.enclosures){
        return this.answerEnclosure([])
      }
      const { data } = await getResource(this.enclosures)
      this.answerEnclosure(data)
    },
    // 题目附件，图片预览
    // questionEnclosure(data) {
    //   this.imgList = data.map(x => x.resUrl)
    //   setTimeout(() => {
    //     this.$refs.img.clickHandler()
    //   }, 100)
    // },
    // 答案附件
    answerEnclosure(data) {
      this.resList = data
      this.visable = true
    },
    getSuffix(str = '') {
      const arr = str.split('.')
      const suffix = arr[arr.length - 1]
      return suffix
    },
    openFile(item) {
      window.open(item.resUrl, '_blank')
    }
  },
}
</script>

<style scoped>
  :deep(.el-dialog__header) {
    text-align: center;
  }
  .iconStyle {
    font-size: 18px;
    margin-right: 5px;
    vertical-align: middle;
  }
</style>